<template>
  <div class="main">
    <div class="header">
      <div class="header-d1">登录FILM</div>
    </div>
    <van-tabs
      style="width: 200px; padding-top: 30px; text-align: center; margin: auto"
      v-model="active"
      color="#81F7D8"
    >
      <van-tab title="账号登录" />
      <van-tab title="账号注册" />
    </van-tabs>
    <div class="form" v-if="active === 0">
      <van-cell-group inset>
        <van-field
          required
          v-model="signInForm.phone"
          label="电话号码"
          placeholder="请输入电话号码"
          style="margin: 20px 0px 0px 0px"
        />
        <van-field
          required
          v-model="signInForm.password"
          label="密码"
          placeholder="请输入密码"
          style="margin: 20px 0px 0px 0px"
          type="password"
        />
        <van-button
          class="btn"
          type="info"
          style="margin: 20px 0px 0px 0px"
          block
          round
          @click="submitSignIn"
          >确认</van-button
        >
      </van-cell-group>
    </div>
    <div class="form" v-if="active === 1">
      <van-uploader
        v-model="fileList"
        :after-read="onRead"
        :max-count="1"
        style="padding-left: 120px"
      >
        <template #preview-cover="{ file }">
          <div class="preview-cover van-ellipsis">{{ file.name }}</div>
        </template>
      </van-uploader>
      <div
        style="
          font-size: 12px;
          color: #909399;
          padding-left: 135px;
          margin-bottom: 10px;
        "
      >
        上传头像
      </div>
      <van-cell-group inset>
        <van-field
          required
          v-model="signUpForm.phone"
          label="电话号码"
          placeholder="请输入电话号码"
          style="margin: 20px 0px 0px 0px"
        />

        <van-field
          required
          v-model="signUpForm.password"
          label="密码"
          placeholder="请输入密码"
          style="margin: 20px 0px 0px 0px"
          type="password"
        />
        <van-field
          required
          v-model="signUpForm.nickname"
          label="昵称"
          placeholder="请输入昵称"
          style="margin: 20px 0px 0px 0px"
        />
        <van-field
          required
          v-model="signUpForm.status"
          label="身份"
          placeholder="请输入身份"
          style="margin: 20px 0px 0px 0px"
        />
        <van-button @click="submitSignUp" type="info" class="btn" round
          >注 册</van-button
        >
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { checkSignInForm, checkSignUpForm } from "@/utils/check";
import { Login, SaveUser } from "@/api/user";
import axios from "axios";
import { BASE_RUL } from "@/utils/request";

export default {
  data() {
    return {
      active: 0,
      fileList: [],
      signInForm: {
        phone: "",
        password: "",
      },
      signUpForm: {
        avatar: "",
        nickname: "",
        phone: "",
        password: "",
        status: "",
      },
    };
  },

  methods: {
    onRead() {
      let formData = new FormData();
      let file = this.fileList[0].file;
      formData.append("file", file, file.name);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(BASE_RUL + "/file/image", formData, config).then((res) => {
        if (res.status === 200) this.signUpForm.avatar = res.data;
      });
    },

    submitSignIn() {
      if (checkSignInForm(this.signInForm)) {
        Login(this.signInForm).then((res) => {
          if (res.status) {
            localStorage.setItem("user", JSON.stringify(res.data));
            localStorage.setItem("uid", res.data.id);
            this.$toast.success("登录成功");
            this.$router.push("/home");
          }
        });
      }
    },

    submitSignUp() {
      if (checkSignUpForm(this.signUpForm)) {
        SaveUser(this.signUpForm).then((res) => {
          if (res.status) {
            this.$toast.success("注册成功");
            setTimeout(() => {
              this.signUpForm = {};
              this.fileList = [];
              this.active = 0;
            }, 700);
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.van-tab__text {
  font-size: 16px;
  letter-spacing: 1px;
}

.main {
  width: 100%;
  height: 100%;
}

.header {
  height: 110px;
  background: #81f7d8;
  text-align: center;
  letter-spacing: 1px;
}

.header-d1 {
  color: #ffffff;
  font-size: 22px;
  padding-top: 25px;
}

.header-d2 {
  color: #f5f6f7;
  font-size: 13px;
  padding-top: 10px;
}

.form {
  width: 90%;
  height: 300px;
  margin: 20px auto;
}

.input {
  width: 94%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  margin: 10px 0;
  padding: 10px;
  font-size: 13px;
}

.btn {
  width: 100%;
  margin: 30px 0;
  background-color: #81f7d8;
  border: none;
}

.van-tabs__line {
  background-color: #81f7d8;
  width: 30px;
}
</style>